<template>
  <div id="wrap">
    <z-sidebar :menus="menus"></z-sidebar>
    <div class='content '>
      <z-header/>
      <div class="show">
        <transition mode="out-in">
          <router-view :menus="menus" @handleUpdateMenus="postMenu"></router-view>
        </transition>
      </div>
    </div>

  </div>
</template>
<script>

import _ from 'lodash'
import Sidebar from './structure/Sidebar'
import Header from './structure/Header'
export default {
  data() {
    return {
      menus: [],
      user: window.sessionStorage.getItem('user')
        ? JSON.parse(window.sessionStorage.getItem('user'))
        : '没得名字',
      api: {
        logout: this.$api.logout
      },
      buttonMes: [
        {
          words: 'admin',
          icon: 'el-icon-user',
          fun: null
        },
        {
          words: '退出登录',
          icon: 'el-icon-moon-night',
          fun: this.logout
        }
      ],
      buttonFun(item) {
        item.fun()
      }
    }
  },
  methods: {
    test: _.debounce(function() {
      this.$http.post(this.$api.test1).then(function(res) {
        console.log(res)
      })
    }, 400),
    async logout() {
      let { data: res } = await this.$http.post(this.api.logout)
      if (res.status === 200) {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    },
    async postMenu() {
      let [err, data] = await this.$asy(this.$http.post(this.$api.menu.list))
      if (err) {
        this.$error('没有菜单')
      }
      this.menus = data.data.data.menus
    }
  },
  components: {
    'z-sidebar': Sidebar,
    'z-header': Header
  },
  created() {
    this.postMenu()
  },
  mounted() {
  }
}
</script>
<style lang="less" scoped>

  #wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  #wrap > div.content {
    height: 100%;
    overflow-y: auto;
  }

  div.show {
    background-image: linear-gradient(#dbdfe1, #f4f8fb 10px);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px 15px 0 40px;
    min-width: 1236px;
    overflow: auto;
    height: 100%;
    margin-bottom: -85px;
    padding-bottom: 85px;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(150px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }
</style>
